<template>
    <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <div style="display: table;width: 100%; padding: 20px 10px 15px;">
            <div style="display: table-row">
                <div class="tableTitle" style="width: 2.5rem">
                    序号
                </div>
                <div class="tableTitle">
                    认领名称
                </div>
                <div class="tableTitle">
                    完成度
                </div>
                <div class="tableTitle">
                    开展周期
                </div>
                <div class="tableTitle">
                    发布时间
                </div>
                <div class="tableTitle">
                </div>
            </div>
            <div :class="{'tablerow':true, 'grayLine': (index % 2 === 0)}" style="display: table-row;" v-if="claim_list.length > 0" v-for="(item,index) in claim_list" :key="item.id">
                <div class="tableTitle">
                    {{index + 1}}
                </div>
                <div class="tableTitle">
                    {{item.name}}
                </div>
                <div class="tableTitle">
                    <el-progress :text-inside="true" :stroke-width="26" :percentage="item.percentage" :color="percentageColor"></el-progress>
                </div>
                <div class="tableTitle">
                    {{getDate(item.start_time)}} - {{getDate(item.stop_time)}}
                </div>
                <div class="tableTitle">
                    {{item.create_time}}
                </div>
                <div class="tableTitle">
                    <el-button type="primary" size="mini" @click="readNotify(item)">详情</el-button>
                </div>
            </div>
        </div>

        <div class="paginaClass">
            <el-pagination
                    @current-change=currentChange
                    :current-page.sync=currentPage
                    :page-size="size"
                    layout="prev, pager, next, jumper"
                    :total=total
                    style="margin-right: 80px">
            </el-pagination>

            <div  style="padding-right: 15px">
            <el-button type="primary" size="mini" v-if="this.type === '0'" @click="newClaim">新增认领</el-button>
            </div>
        </div>
    </el-card>
</template>

<script>
    import Cookies from 'js-cookie'
    import API from '../../api'

    export default {
        name: "claim_list",
        data(){
            return{
                total:0,
                currentPage:this.currentPage,
                size:this.pageSize,
                token:Cookies.get('token'),
                type: Cookies.get('type'),
                claim_list:{},
                percentageColor:'#409eff',
            };
        },

        mounted:function(){
            this.getClaimList();
        },

        methods:{
            currentChange(val){
                this.currentPage = val;
                this.getSurveyList();
            },

            /**
             * 计算完成度
             * */
            calPercentage(){
                this.claim_list.forEach(item => {
                    let per = item.submit_num/item.total_num*100;
                    if (isNaN(per)) per = 0;
                    var standper;
                    if (Number.isInteger(per)) {
                        standper = per;
                    } else {
                        standper = per.toFixed(1);
                    }
                    item.percentage = standper;
                })
            },

            /**
             * 计算发布时间
             * */
            getDate(timestamp) {
                var now = new Date(timestamp),
                    y = now.getFullYear(),
                    m = now.getMonth() + 1,
                    d = now.getDate();
                return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " "
            },

            /**
             * 详情
             * */
            readNotify(item){
                if (this.type === '0') {
                    this.$router.push({path: `/paper/${item.id}/admin_detail`});
                } else {
                    this.$router.push({path: `/paper/${item.renling_id}/user_detail`});
                }
            },

            /**
             * 新增
             * */
            newClaim(){
                this.$router.push({path: `/paper/paper_claim`})
            },

            /**
             * 获取认领列表
             * */
            getClaimList(){
                let data = {
                    token: this.token,
                    orderby: {},
                    page: this.currentPage,
                    size: this.pageSize,
                };

                if(this.type === '0') {
                    API.adminRenlingList(data).then(res =>{
                        if(res.code){
                            alert(res.message);
                            return;
                        }

                        this.claim_list=res.list;
                    }).catch(msg => {
                        alert('操作失败')
                    })
                }else {
                    API.claimList(data).then(res =>{
                        if(res.code){
                            alert(res.message);
                            return;
                        }

                        this.claim_list=res;
                        console.log(this.claim_list);
                    }).catch(msg => {
                        alert('操作失败')
                    })
                }
            },
        },
    }
</script>

<style scoped>
    .tableTitle{
        display: table-cell;
        font-size: 15px;
        padding: 5px;
        color:gray;
        text-align: center;
    }
    .paginaClass{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 5%;
        padding-bottom: 15px;
        padding-top: 10px;
    }
</style>